<template>
  <div class="container w"  @mouseenter="isShow = true" @mouseleave="isShow = false">
    <!--上半部图片-->
    <div class="prizeImg">
      <el-image
          style="width: 320px; height: 160px"
          :src="imgUrl"
          fit="cover"></el-image>
    </div>
    <!--下半部奖项-->
    <div class="prizeDesc">
      <h4>{{title}}</h4>
      <h3>{{summary}}</h3>
    </div>
    <!--奖项描述弹窗-->
    <el-collapse-transition>
      <div v-show="isShow" class="popUps">
        <h2>详情描述</h2>
        <h2>───</h2>
        <h3>
          {{desc}}
        </h3>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>
export default {
  name: 'DynamicCard',
  components: {},
  props: {
    imgUrl:{
      type:String,
      default: require('../assets/images/prizes/QQ图片20220806110700.jpg')
    },
    title:{
      type:String,
      default: '奖项1'
    },
    summary:{
      type:String,
      default: '某某奖项全国一等奖'
    },
    desc:{
      type:String,
      default: '该奖项描述该奖项描述该奖项描述该奖项描述该奖项描述该奖项描述该奖项描述该奖项描述该奖项描述该奖项描述该奖项描述该奖项描述该奖项描述该奖项描述该奖项描述该奖项描述该奖项描述该奖项描述该奖项描述该奖项描述'
    }
  },
  data() {
    return {
      //弹窗是否显示
      isShow: false,
    }
  }
}
</script>

<style lang="scss" scoped>
  .container{
    position: relative;
    width: 320px;
    box-shadow: #666 0 0 0.2rem;

    .prizeDesc{
      height: 100px;
      padding: 12px;
      overflow: hidden;
      border-bottom: 2px solid #3A92E4;

      h4{
        font-weight: normal;
        font-size: 14px;
        text-align: center;
        margin-bottom: 10px;
      }

      h3{
        font-weight: normal;
        font-size: 16px;
        text-align: center;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
    .popUps{
      position: absolute;
      transition: height 0.3s;
      white-space: pre-wrap;
      bottom: 0;
      width: 100%;
      height: 210px;
      padding: 0 12px 0px 12px;
      background-color: #2f65cc;
      color: #fff;
      h2:first-child{
        margin-top: 25px;
      }
      h2{
        font-weight: normal;
        font-size: 22px;
        text-align: center;
      }

      h3{
        font-weight: normal;
        overflow: hidden;
        font-size: 14px;
        line-height: 28px;
        letter-spacing: 1px;
        text-align: center;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
      }
    }
  }
</style>
